import { nextTick, ref, watch } from "vue";
import { SelectDataItem } from "./select.type";
import { DomUtil } from "../../utils";
import { SelectCommon } from "./select.type";

export default function (props: any, common: SelectCommon) {
  const data = ref<SelectDataItem[]>(props.data);
  const visible = ref(false);
  const { selectedItems, inputValue, selectMain } = common;
  const preSelIndex = ref(-1);
  const element = ref();
  const top = ref("");
  const bottom = ref("");
  function setData(isAll: boolean, _data?: SelectDataItem[]) {
    if (isAll) {
      //props中的data最全 如果数量一致 则说明数据没有变化 最全数据
      // if(props.data.length === data.value.length){
      //   return;
      // }
      _data = props.data;
    } else if (!_data) {
      throw "need to define data";
    }
    data.value = _data as SelectDataItem[];
  }
  function selectItem(item: SelectDataItem) {
    if (props.multiple) {
      if (selectedItems.exist(item) !== false) {
        selectedItems.remove(item);
      } else {
        selectedItems.add(item);
      }
    } else {
      if (selectedItems.exist(item) !== false) return;
      selectedItems.clear();
      selectedItems.add(item);
      inputValue.value = item.text;
    }
  }
  function preSelect(d: number) {
    const len = data.value.length;
    if (len === 0) return;
    if (d > 0 && preSelIndex.value === len - 1) {
      preSelIndex.value = -1;
    } else if (d < 0 && preSelIndex.value <= 0) {
      preSelIndex.value = len;
    }
    preSelIndex.value += d;
  }
  function setPreSelect() {
    if (preSelIndex.value === -1) return;
    const target = data.value[preSelIndex.value];
    if (target) {
      onClickItem(target);
      preSelIndex.value = -1;
    }
  }
  function onClickItem(item: SelectDataItem) {
    selectItem(item);
    if (props.multiple) {
      //
      if (props.resetAfterSelect && props.editable) {
        inputValue.value = "";
        setData(true);
      }
    } else {
      visible.value = false;
    }
  }
  function resize() {
    if (!visible.value) return;
    const el = element.value;
    const pEl = selectMain.value;
    if (el && pEl) {
      const info = DomUtil.getAroundElToBody(el, pEl);
      //如果下面没超 则优先下面；如果上下都超了 优先超的少的
      if (info.bottom > 0 || (info.top < 0 && -info.bottom < -info.top)) {
        top.value = "100%";
        bottom.value = "auto";
      } else {
        top.value = "auto";
        bottom.value = "100%";
      }
    }
  }
  watch(visible, (val) => {
    if (val) {
      nextTick(() => {
        resize();
      });
    } else {
      if (!props.editable) return;
      if (props.multiple) {
        inputValue.value = "";
        setData(true);
      } else {
        const items = selectedItems.ref.value;
        if (items.length > 0) {
          inputValue.value = items[0].text;
        } else if (items.length === 0) {
          inputValue.value = "";
        }
        //还原全数据
        setData(true);
      }
    }
  });
  return {
    data,
    visible,
    onClickItem,
    setPreSelect,
    preSelIndex,
    preSelect,
    setData,
    element,
    top,
    bottom,
    resize,
  };
}
